<template>
  <div>
    <TableHead
      :query="query"
      @search="search"
      v-model:skin-name="props.query.skinName"
      v-model:groups-id="props.query.groupsId"
      @create="emit('create')"
      @reload="list"
    />
    <a-card class="mt-4">
      <a-table
        v-model:selected-keys="table.keys"
        :row-key="table.rowKey"
        :row-selection="{
          selectedRowKeys: table.keys
        }"
        :loading="table.loading"
        :data="table.data"
        :bordered="false"
        :columns="translateColumns(columns.columns)"
        :pagination="{
          current: query.pageNum,
          total: query.total,
          pageSize: query.pageSize
        }"
        @page-size-change="pageSizeChange"
        @page-change="pageChange"
      >
        <template #operation="{ record }">
          <div class="flex gap-2 justify-center" v-if="record.deptId === store.$state.user.deptId">
            <a-button size="mini" @click="edit(record[table.rowKey])">
              <IconEdit />
            </a-button>
            <a-button @click="del(record[table.rowKey])">
              <template #icon>
                <IconDelete />
              </template>
            </a-button>
          </div>
        </template>
        <template #preview="{ record }">
          <div @click="previewImage(record)">
            <img height="80" :src="preview(record)" />
          </div>
        </template>
      </a-table>
    </a-card>

    <a-image-preview-group
      :default-current="defaultCurrent"
      :key="defaultCurrent"
      :srcList="current?.skinList.map((v) => v.preview)"
      v-model:visible="previewVisible"
    />
  </div>
</template>

<script setup lang="ts">
import { deleteSkins, detailSkins, ISkin, listSkins } from "@/api/service/skin";
import { userStore } from "@/store/modules/user/user";

import { IQuery, TableConfig } from "@/interface/IAxios";
import { Modal } from "@arco-design/web-vue";
import columns from "./column";
import TableHead from "./Head.vue";

const t = translate("公共模块");
const store = userStore();
const previewVisible = ref(false);

const defaultCurrent = ref(1);

const current = ref<ISkin>();
const props = defineProps<{
  query: IQuery<ISkin>;
  table: TableConfig<ISkin>;
}>();
const emit = defineEmits(["create", "edit"]);

const getDetail = async (id: string) => {
  const { data } = await detailSkins(id);
  return data;
};

const list = async () => {
  props.table.loading = true;
  const data = await listSkins(props.query);
  // TODO: 接口调用
  props.table.data = data.rows;
  props.query.total = data.total;
  props.table.loading = false;
};

/* 编辑 */
const edit = async (id: string) => {
  const data = await getDetail(id);
  emit("edit", data);
};

const previewImage = async (record: ISkin) => {
  const data = await getDetail(record.skinId);
  current.value = data;
  defaultCurrent.value = record.skinList.length <= 1 ? 0 : 1;
  previewVisible.value = true;
};
const preview = (record: ISkin) => {
  if (record.skinList.length === 0) return;

  const [first, second] = record.skinList;
  if (!first) return;

  const { background } = first;
  if (!second) return background;

  const { preview: previewSrc } = second;
  return previewSrc || background;
};
const del = (id: string) => {
  Modal.warning({
    title: t.value?.["警告"],
    content: t.value?.["是否执行"],
    onOk: async () => {
      await deleteSkins([id]);
      list();
    },
    okText: "Ok",
    cancelText: "Cancel"
  });
};

const pageChange = (page: number) => {
  props.query.pageNum = page;
  list();
};
const pageSizeChange = (pageSize: number) => {
  props.query.pageNum = pageSize;
  list();
};
const search = () => {
  props.query.pageNum = 1;
  list();
};

onMounted(async () => {
  await list();
});

defineExpose({
  search
});
</script>

<style lang="scss" scoped></style>
